<template>
  <el-dialog class="orderlist_dialog" v-model="orderState.filterdialog" :show-close="false" width="700"
    @open="handleOpen">
    <template #header="{ close, titleId, titleClass }">
      <div class="orderlist_dialog_header">
        <div :id="titleId" :class="titleClass" class="title">筛选</div>
        <img src="@/assets/setting/close.png" style="width: 16px; height: 16px; cursor: pointer" @click="close"
          alt="" />
      </div>
      <div class="orderlist_bg"></div>
    </template>
    <div class="orderlist_dialog_content">
      <template v-if="orderState.activetype == 0">
        <el-form :model="orderState.filterForm" label-width="auto">
          <el-form-item label="任务类型:">
            <el-select v-model="orderState.filterForm.task_type" style="width: 300px">
              <el-option label="全部" value="all" />
              <el-option label="手动下单" value="_reservation_order" />
              <el-option label="手动跟单" value="_copy_order_hand" v-if="checkRoles(userStore.user.roles, 'hand_copy')" />
              <el-option label="自动跟单" value="_copy_order_auto" v-if="checkRoles(userStore.user.roles, 'auto_copy')" />
            </el-select>
          </el-form-item>
          <el-form-item :label="`起止时间:`">
            <el-date-picker v-model="orderState.filterForm.order_time" class="datapicker_orderlist" type="datetimerange"
              start-placeholder="开始日期" end-placeholder="结束日期" :clearable="false" value-format="YYYY-MM-DD HH:mm:ss"
              format="YYYY-MM-DD HH:mm:ss" style="width: 300px">
              <template #range-separator>
                <img src="@/assets/order/time-2.png" style="width: 12px; height: 12px; margin: 0 8px" alt="" />
              </template>
            </el-date-picker>
          </el-form-item>
          <el-form-item label="玩法:">
            <el-select v-model="orderState.filterForm.sport_type" style="width: 300px">
              <el-option label="足球" value="soccer" />
              <el-option label="篮球" value="basketball" />
            </el-select>
          </el-form-item>
          <el-form-item label="订单类型:">
            <el-select v-model="orderState.filterForm.its_me" style="width: 300px">
              <el-option label="全部" :value="-1" v-if="checkRoles(userStore.user.roles, 'share')" />
              <el-option label="共享" :value="0" v-if="checkRoles(userStore.user.roles, 'share')" />
              <el-option label="独享" :value="1" />
            </el-select>
          </el-form-item>
          <el-form-item :label="`联赛:`">
            <el-select v-model="orderState.filterForm.league_name" style="width: 300px"
              @change="orderStore.changeleaguename()">
              <el-option label="全部" value="all" />
              <el-option v-for="(value, key) in orderState.leaguefilter" :key="key" :label="value.league"
                :value="value.league" />
            </el-select>
          </el-form-item>
          <el-form-item :label="`赛事:`">
            <el-select v-model="orderState.filterForm.homeaway" style="width: 300px">
              <el-option label="全部" value="all" />
              <el-option v-for="(item, index) in orderState.matchfilter" :key="index"
                :label="`${item.home}-vs-${item.away}`" :value="`${item.home}-vs-${item.away}`" />
            </el-select>
          </el-form-item>
          <el-form-item :label="`赛事起止时间:`">
            <el-date-picker v-model="orderState.filterForm.match_time" class="datapicker_orderlist" type="datetimerange"
              start-placeholder="开始日期" end-placeholder="结束日期" :clearable="false" value-format="YYYY-MM-DD HH:mm:ss"
              format="YYYY-MM-DD HH:mm:ss" style="width: 300px">
              <template #range-separator>
                <img src="@/assets/order/time-2.png" style="width: 12px; height: 12px; margin: 0 8px" alt="" />
              </template>
            </el-date-picker>
          </el-form-item>
          <!-- <el-form-item label="订单类型:">
          <el-input v-model="value" style="width: 300px" />
        </el-form-item> -->
          <el-form-item :label="`订单状态:`">
            <el-select v-model="orderState.filterForm.order_status" style="width: 300px">
              <el-option v-for="(item, index) in orderState.status" :key="index" :label="item.label"
                :value="item.value" />
            </el-select>
          </el-form-item>
        </el-form>
      </template>
      <template v-if="orderState.activetype == 1">
        <el-form :model="orderState.filterForm" label-width="auto">
          <el-form-item label="用户:">
            <el-select v-model="orderState.filterForm.user_name" style="width: 300px">
              <el-option v-for="(item,index) in orderState.userList" :key="index" :label="item.value" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item :label="`起止时间:`">
            <el-date-picker v-model="orderState.filterForm.order_time" class="datapicker_orderlist" type="datetimerange"
              start-placeholder="开始日期" end-placeholder="结束日期" :clearable="false" value-format="YYYY-MM-DD HH:mm:ss"
              format="YYYY-MM-DD HH:mm:ss" style="width: 300px">
              <template #range-separator>
                <img src="@/assets/order/time-2.png" style="width: 12px; height: 12px; margin: 0 8px" alt="" />
              </template>
            </el-date-picker>
          </el-form-item>
          <el-form-item label="玩法:">
            <el-select v-model="orderState.filterForm.sport_type" style="width: 300px">
              <el-option label="足球" value="soccer" />
              <el-option label="篮球" value="basketball" />
            </el-select>
          </el-form-item>
          <el-form-item :label="`联赛:`">
            <el-select v-model="orderState.filterForm.league_name" style="width: 300px"
              @change="orderStore.changeleaguename()">
              <el-option label="全部" value="all" />
              <el-option v-for="(value, key) in orderState.leaguefilter" :key="key" :label="value.league"
                :value="value.league" />
            </el-select>
          </el-form-item>
          <el-form-item :label="`赛事:`">
            <el-select v-model="orderState.filterForm.homeaway" style="width: 300px">
              <el-option label="全部" value="all" />
              <el-option v-for="(item, index) in orderState.matchfilter" :key="index"
                :label="`${item.home}-vs-${item.away}`" :value="`${item.home}-vs-${item.away}`" />
            </el-select>
          </el-form-item>
          <el-form-item :label="`订单状态:`">
            <el-select v-model="orderState.filterForm.order_status" style="width: 300px">
              <el-option v-for="(item, index) in orderState.status" :key="index" :label="item.label"
                :value="item.value" />
            </el-select>
          </el-form-item>
        </el-form>
      </template>

      <div class="form_buttons">
        <el-button class="button1" @click="orderStore.filterReset()">重置</el-button>
        <el-button class="button2" @click="orderStore.clicksubmit()">确认</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import { checkRoles } from '@/stores/roles'
import { http } from '@/utils/http'
const { orderStore, orderState } = inject('OrderStore')
const userStore = useUserStore()
const handleOpen = () => {
  console.log(orderState.filterForm)
}

const submit = () => {
  console.log(orderState.filterForm)
}
</script>

<style lang="scss" scoped>
.orderlist_dialog_content {
  margin: 0 12px 12px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.form_buttons {
  padding: 24px 0;
  width: 100%;
  display: flex;
  justify-content: center;

  .button1,
  .button1:hover {
    width: 120px;
    height: 32px;
    border-radius: 0;
    background-color: #f3f5fd;
    border-color: #f3f5fd;
    font-family: AlibabaPuHuiTi_2_65_;
    font-size: 14px;
    color: #000;
  }

  .button2,
  .button2:hover {
    width: 120px;
    height: 32px;
    border-radius: 0;
    background-color: var(--pcmain-color);
    border-color: var(--pcmain-color);
    font-family: AlibabaPuHuiTi_2_65_;
    font-size: 14px;
    color: #fff;
  }
}
</style>

<style>
.orderlist_dialog {
  border-radius: 0;
  padding: 0;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
  background-color: #fff;
}

.orderlist_dialog .el-dialog__header {
  padding: 0;
}

.orderlist_dialog_header {
  display: flex;
  justify-content: space-between;
  padding: 8px 12px;
  height: 80px;
  position: relative;
  z-index: 2;
}

.orderlist_dialog_header .title {
  font-family: AlibabaPuHuiTi_2_85_;
  font-size: 16px;
  font-weight: bold;
  color: #000;
}

.orderlist_bg {
  width: 100%;
  height: 80px;
  background-image: url('@/assets/order/bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  z-index: 1;
  top: 0;
}

.orderlist_dialog_content .el-form-item {
  margin-bottom: 16px;
}

.orderlist_dialog_content .el-form-item__label {
  font-family: AlibabaPuHuiTi_2_65_;
  font-size: 14px;
  text-align: right;
  color: #000;
}

.orderlist_dialog_content .el-input__wrapper {
  height: 32px;
  min-height: 32px;
  background-color: #f3f5fd !important;
  border-color: #f3f5fd;
  box-shadow: none;
  padding: 8px;
}

.orderlist_dialog_content .el-input__inner {
  height: 32px;
  min-height: 32px;

  padding: 8px;
}

.orderlist_dialog_content .el-select__wrapper {
  height: 32px;
  min-height: 32px;
  background-color: #f3f5fd !important;
  border-color: #f3f5fd;
  box-shadow: none;
}

.datapicker_orderlist {
  border-radius: 0;
}

.datapicker_orderlist .el-range__close-icon,
.datapicker_orderlist .el-range__icon {
  display: none;
}

.datapicker_orderlist::before {
  content: '';
  position: absolute;
  background-image: url('@/assets/order/calendar.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  right: 8px;
  width: 16px;
  height: 16px;
}

.datapicker_orderlist .el-range-input:first-of-type {
  margin-left: -20px !important;
}
</style>
